<template>
	<view class="page-all">
		<Header title="食品安全日常检查" bgColor="#fff" :leftIconSize="20"></Header>
		<Tabs :list="list" @changeTab="changeTab"></Tabs>
		<view class="search-content">
			<view class="left">
				<uv-search placeholder="请输入搜索内容" bgColor="#fff" v-model="keyword" :showAction="false"></uv-search>
			</view>
			<view class="screen-icon" @click="showScreen">
				<image src="@/static/image/index/icon2.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="list-container">
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="img"
					@click="selsetTabValue == '已完成' ? (item.isShowRectificationReport ? toInfo() : toRectificationReport()) : toInfo()">
					<image src="../../static/image/index/login.jpg"></image>
					<view class="statu" :class="{ green: selsetTabValue == '已完成' }">合格</view>
				</view>
				<view class="info">
					<!-- 根据是否显示整改报告判断跳转展示不同的详情页面 -->
					<view
						@click="selsetTabValue == '已完成' ? (item.isShowRectificationReport ? toInfo() : toRectificationReport()) : toInfo()">
						<view class="row">
							<view class="title">学校名称:</view>
							<view class="con">{{ item.name }}</view>
						</view>
						<view class="row">
							<view class="title">指标名称:</view>
							<view class="con">{{ item.Indicator }}</view>
						</view>
						<view class="row">
							<view class="title">检查日期:</view>
							<view class="con">{{ item.date }}</view>
						</view>
						<view class="row sign">
							<view class="title">检查人:</view>
							<view class="con">
								<image src="../../static/image/index/login.jpg" mode="heightFix"></image>
							</view>
						</view>
					</view>
					<view class="btn-row" v-if="selsetTabValue == '待上传检查记录单'">
						<button @click="goToUpload">上传记录单</button>
						<button>导出记录单</button>
					</view>
					<view class="btn-row-one" v-if="selsetTabValue == '待审核'">
						<button @click="goToExamine">审核</button>
					</view>
					<view class="btn-row-one" v-if="selsetTabValue == '待复查'">
						<button @click="goToReview">复查</button>
					</view>
					<view :class="item.isShowRectificationReport ? ' btn-row' : 'btn-row-one'"
						v-if="selsetTabValue == '已完成'">
						<button @click="getInspectionReport">检查报告</button>
						<button v-if="item.isShowRectificationReport">整改报告</button>
					</view>
				</view>
			</view>
		</view>

		<view class="check-bottom-box" @click.stop>
			<button class="sure-button" @click.stop="toCreate()">创建检查</button>
		</view>

		<!--筛选弹层-->
		<uv-popup ref="popup" @change="change" :closeable="true">
			<view class="popup-title">筛选</view>
			<view class="popup-content">
				<view class="popup-title-row">
					<text>检查日期</text>
				</view>
				<view class="popup-date-row">
					<view class="date" @click="showCalendar()">{{ startDate }}</view>
					<view class="to">至</view>
					<view class="date" @click="showCalendar()">{{ endDate }}</view>
					<uv-calendars ref="calendar" mode="range" reset-text="清空" @reset="dateReset" @confirm="dateConfirm"></uv-calendars>
				</view>
				<view class="popup-title-row">
					<text>办学性质</text>
				</view>
				<view class="popup-con-row">
					<view class="item" :class="{ actived: natureCurren == item.name }" v-for="(item, index) in natureList"
						:key="index" @click="natureCurren = natureCurren===item.name?'':item.name">
						{{ item.name }}
					</view>
				</view>
				<view class="popup-title-row">
					<text>办学类型</text>
				</view>
				<view class="popup-con-row">
					<view class="item" :class="{ actived: typeCurren == item.name }" v-for="(item, index) in typeList"
						:key="index" @click="typeCurren = typeCurren===item.name?'':item.name">
						{{ item.name }}
					</view>
				</view>
				<view class="popup-title-row">
					<text>地区</text>
				</view>
				<view class="popup-con-row">
					<view class="item" :class="{ actived: cityCurren == item.name }" v-for="(item, index) in cityList"
						:key="index" @click="cityCurren = cityCurren===item.name?'':item.name">
						{{ item.name }}
					</view>
				</view>
				<view class="bottom-box" @click.stop>
					<button class="yellow-sure-button" style="width: 49%" @click.stop="resetForm()">重置</button>
					<button class="sure-button" @click.stop="popupSubmit()">确认</button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
const keyword = ref('');

const cityCurren = ref('省直'); //选中城市
const natureCurren = ref('民办'); //选中的学校性质
const typeCurren = ref('小学');

const calendar = ref();
const startDate = ref('开始日期');
const endDate = ref('结束日期');
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);
// isShowRectificationReport是否显示整改报告
const dataList = reactive([
	{ name: '长春市第一实验幼儿园', Indicator: '2024年春季校园食堂检查', InspectedBy: '', date: '2024-01-08', isShowRectificationReport: true },
	{ name: '长春市第一实验幼儿园', Indicator: '2024年春季校园食堂检查', InspectedBy: '', date: '2024-01-08', isShowRectificationReport: false }
]);

const typeList = reactive([
	{ id: '1', name: '小学' },
	{ id: '2', name: '普通初中' },
	{ id: '3', name: '普通高中' },
	{ id: '4', name: '小初中一体' },
	{ id: '5', name: '初高中一体' },
	{ id: '6', name: '小初高一体' },
	{ id: '7', name: '幼儿园' },
	{ id: '8', name: '职业类学校' },
	{ id: '9', name: '大学' }
]);

const natureList = reactive([{ name: '民办' }, { name: '公办' }, { name: '其他' }]);

const cityList = reactive([
	{ name: '省直', code: '' },
	{ name: '长春市', code: '' },
	{ name: '吉林市', code: '' },
	{ name: '四平市', code: '' },
	{ name: '白城市', code: '' },
	{ name: '松原市', code: '' },
	{ name: '辽源市', code: '' },
	{ name: '白山市', code: '' },
	{ name: '通化市', code: '' },
	{ name: '延吉市', code: '' }
]);

const list = ref([
	{
		name: '待上传检查记录单'
	},
	{
		name: '待审核'
	},
	{
		name: '待复查'
	},
	{
		name: '已完成'
	}
]);
const selsetTabValue = ref('待上传检查记录单');

//点击tab切换
function changeTab(e) {
	selsetTabValue.value = e.name;
}
//跳转开始创建
function toCreate() {
	uni.navigateTo({
		url: '/packageDailyCheck/pages/createCheck/index'
	});
}
// 跳转上传检查记录单
function goToUpload() {
	uni.navigateTo({
		url: '/packageDailyCheck/pages/uploadRecordForm'
	});
}

//弹出开始时间选择
function showCalendar() {
	calendar.value.open();
}
function dateConfirm(e) {
	startDate.value = e[0];
	endDate.value = e[e.length - 1];
}

let popup = ref();
//显示筛选弹层
function showScreen() {
	popup.value.open('bottom');
}

function popupSubmit() {
	popup.value.close();
}
const data = ref({});
//跳转查看信息页面
function toInfo(id) {
	if (selsetTabValue.value == '待上传检查记录单') {
		data.value = {
			value: 0,
			showShenInformation: false
		};
	} else if (selsetTabValue.value == '待审核') {

		data.value = {
			value: 1,
			showShenInformation: false
		};
	} else if (selsetTabValue.value == '待复查') {
		data.value = {
			value: 1,
			selsetThreeTab: true,
			showShenInformation: true
		};
	} else {
		data.value = {
			value: 2,
			// 是否显示审核信息
			showShenInformation: true,

		};
	}
	uni.navigateTo({
		url: '/packageDailyCheck/pages/viewIndex?data=' + encodeURIComponent(JSON.stringify(data.value))
	});
}
// 审核
function goToExamine() {
	data.value = {
		value: 1,
		selsetThreeTab: true,
		isExamine: true,
		showShenInformation: false
	};
	uni.navigateTo({
		url: '/packageDailyCheck/pages/viewIndex?data=' + encodeURIComponent(JSON.stringify(data.value))
	});
}
// 复查
function goToReview() {
	data.value = {
		selsetFourTab: true,
		isReview: true,
		showShenInformation: true,
		isShowReview:false
	};
	uni.navigateTo({
		url: '/packageDailyCheck/pages/viewIndex?data=' + encodeURIComponent(JSON.stringify(data.value))
	});
}
// 检查报告
function getInspectionReport() { }
// 未显示整改报告查看详情
function toRectificationReport() {
	data.value = {
		value: 0,
		showShenInformation: false
	};
	uni.navigateTo({
		url: '/packageDailyCheck/pages/viewIndex?data=' + encodeURIComponent(JSON.stringify(data.value))
	});
}

//点击重置按钮
function resetForm() {
	natureCurren.value = '';
	typeCurren.value = '';
	cityCurren.value = '';
	startDate.value = '开始日期';
	endDate.value = '结束日期';
}
function dateReset(){
  startDate.value = '开始日期';
  endDate.value = '结束日期';
}
</script>

<style lang="scss" scoped>
.bottom-box {
	padding: 0;

	.sure-button {
		width: 49% !important;
	}
}
</style>
